<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{systemSetting.info}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-72 - 44; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/4;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{querySystemInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'id',name : 'id',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{system.search.id}]]*/"",name : 'cfgId',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{system.search.name}]]*/"",name : 'cfgName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{system.search.value}]]*/"",name : 'cfgValue',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{system.search.remarks}]]*/"",name : 'remarks',width : _columnWidth, sortable : true,align : 'center'}

                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowbinddata : true
            });
            query();

            $("#query-btn-id").click(function (event) {
                event.stopPropagation()
                query();
            })



            $("#add-organ-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{organ.add}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $("#add-organ-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#add-btn-id").click(function (event) {
                event.stopPropagation()
                $("#add-organ-form-id").resetForm();
                $("#add-organ-dialog-id").dialog('open')
            })

            $("#add-organ-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#add-organ-dialog-id").dialog('close');
                    query();
                    treeFresh();
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });



            <!-- 修改-->
            $("#update-organ-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{common.modify}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $("#update-organ-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#update-btn-id").click(function (event) {

                var id = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
                if(id.length == 0){
                    message(/*[[#{common.select.more}]]*/'');
                    return;
                }
                if(id.length!=1) {
                    message(/*[[#{common.select.one}]]*/'');
                    return;
                }
                event.stopPropagation();
                var name = $("#flexigrid-id").getFlexigridiAttrByIndex(1);
                var value = $("#flexigrid-id").getFlexigridiAttrByIndex(2);
                var remark = $("#flexigrid-id").getFlexigridiAttrByIndex(3);
                $("#update-organ-form-id").resetForm();
                $("#update-organ-dialog-id").dialog('open');
                $("#cfgIdUpdate").val(id);
                $("#cfgNameUpdate").val(name);
                $("#cfgValueUpdate").val(value);
                $("#remarksUpdate").val(remark);
            })

            $("#update-organ-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#update-organ-dialog-id").dialog('close');
                    query();
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });



            <!-- 删除 -->
            $("#delete-btn-id").click(function (event) {
                event.stopPropagation();
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
                //console.info("roleId:" + ids)
                if(ids.length == 0){
                    message(/*[[#{common.select.more}]]*/'');
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{deleteSystemById}]]*/'',
                    data: [{name:"systemUuidArray",value:ids}],
                    success: function (data) {
                        // console.info(data)
                        message(data.msg);
                        query();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            })

        });//ready

        function query() {
            var organName = $("#organ-name-id").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"remarks",value:organName}
                ]
            }).flexReload();

        }

        $(document).ready(function(){
            treeFresh();
        });

        function treeFresh() {
            $.ajax({
                url : /*[[@{getAllOrgan}]]*/"",
                type : 'post',
                async : 'true',
                cache : false,
                data : {},
                dataType : 'json',
                success : function(data) {
                    $.fn.zTree.init($("#treeDemo"), setting, data);
                }

            });
        }

        var setting = {
            view: {
                showIcon:false,  //这个是是否显示文件夹和文件的图标
                dblClickExpand : false  //这个是设置是否只能选择一个节点
                //selectedMulti: true  //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true //这个是设置数据格式为简单json格式
                }
            },check:{
                enable:true,
                chkboxType:{"Y":"","N":""} //这个是设置选中子节点实话,是否需要选中父节点,以及选中父节点是是否需要选中子节点
            },
            callback: {
                beforeCheck : function(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.checkAllNodes(false);
                    return true;
                },
                onCheck : function(e, treeId, treeNode) {
                    console.log("当前被选择的节点：");
                    console.log(treeNode.id);
                    // alert(treeNode.id);
                }
            }

        };

    </script>
    <style>
        body{
            background-color: #E6E6FA
        }
    </style>
</head>
<body>
<nav style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
    <div sec:authorize="hasRole('ROLE_gqgy_data_role_query')">
        <span th:text="#{systemSetting.remarks}"></span>
        <input  style="margin-left: 10px;" id="organ-name-id">
        <a id="query-btn-id" class="navbar-btn" href="#" style="margin-left: 10px" >
            <i class="glyphicon glyphicon-zoom-in"></i>
            <span th:text="#{common.query}"></span>
        </a>
    </div>

    <a sec:authorize="hasRole('ROLE_gqgy_data_role_add')" id="add-btn-id" href="#" class="navbar-btn" style="margin-left: 10px">
        <i class="glyphicon glyphicon-plus"></i>
        <span th:text="#{common.add}"></span>
    </a>


    <a sec:authorize="hasRole('ROLE_gqgy_data_role_update')" id="update-btn-id" href="#" class="navbar-btn" style="margin-left: 10px">
        <i class="glyphicon glyphicon-floppy-disk"></i>
        <span th:text="#{common.modify}"></span>
    </a>

    <a sec:authorize="hasRole('ROLE_gqgy_data_role_delete')" id="delete-btn-id" href="#" class="navbar-btn" style="margin-left: 10px">
        <i class="glyphicon glyphicon-trash"></i>
        <span th:text="#{common.delete}"></span>
    </a>
</nav>
<div id="treeDemo" class="ztree"></div>
<table  sec:authorize="hasRole('ROLE_gqgy_data_role_query')" id="flexigrid-id"></table>



<div sec:authorize="hasRole('ROLE_gqgy_data_role_add')" id="add-organ-dialog-id" style="display: none">
    <form id="add-organ-form-id" th:action="@{addSystemInfoInfo}" method="post">
        <div class="form-group">
            <span th:text="#{system.search.name}"></span>
            <input class="form-control" id="add-organ-name-id" type="text" name="cfgName">
        </div>
        <div class="form-group">
            <span th:text="#{system.search.value}"></span>
            <input class="form-control" id="system.search.remarks" type="text" name="cfgValue">
        </div>
        <div class="form-group">
            <span th:text="#{system.search.remarks}"></span>
            <input class="form-control" id="add-organ-description-id" type="text" name="remarks">
        </div>
    </form>
</div>




<div sec:authorize="hasRole('ROLE_gqgy_data_role_update')" id="update-organ-dialog-id" style="display: none">
    <form id="update-organ-form-id" th:action="@{updateSystemInfoInfo}" method="post">
        <div class="form-group">
            <span th:text="#{system.search.name}"></span>
            <input class="form-control" id="cfgIdUpdate" type="text" name="cfgId" readonly>
        </div>
        <div class="form-group">
            <span th:text="#{system.search.name}"></span>
            <input class="form-control" id="cfgNameUpdate" type="text" name="cfgName">
        </div>
        <div class="form-group">
            <span th:text="#{system.search.value}"></span>
            <input class="form-control" id="cfgValueUpdate" type="text" name="cfgValue">
        </div>
        <div class="form-group">
            <span th:text="#{system.search.remarks}"></span>
            <input class="form-control" id="remarksUpdate" type="text" name="remarks">
        </div>
    </form>
</div>


</body>
</html>